new Vue({
    el: '#app',
    data() {
      return {
        rules: {

        },
        StyleName:'',
        form: {
            index:{//首页
                Content:{//总背景
                    backgroundColor:'#dc3545',//背景颜色//3cc49dbfd54c25406d606cfb4dcb22b.png
                    backgroundImage:'/6c1e39e6b6bc4258537d8b6691d41e4.png',//背景图片
                    backgroundSize:'contain',//尺寸
                    backgroundRepeat:'no-repeat',//是否重复渲染
                    Logo:false,//logo展示
                    pic:'',
                },
                Icon:{//图标
                    textColor:'#fff',//字体颜色
                    backgroundColor:''//背景颜色
                },
                Tabs:{//导航栏
                    backgroundColor:'',//背景颜色
                    textColor:'#fff',//字体颜色
                    selectColor:'#dcdc08',//选中的字体颜色
                    //区域
                },
                Detail:{//商品卡片
                    backgroundColor:'#fff',//背景颜色
                    themeColor:'#dcdc08',//主体颜色
                },
            },

        },
        Size:[{
            value:'contain',
            label:'缩小图片来适应尺寸'
        },{
            value:'cover',
            label:'扩展图片来填满背景'
        },{
            value:'100% auto',
            label:'宽度100%高度自适应'
        }],
        Repeat:[{
            value:'repeat',
            label:'横向和纵向平铺'
        },{
            value:'repeat-x',
            label:'横向平铺'
        },{
            value:'repeat-y',
            label:'纵向平铺'
        },{
            value:'no-repeat',
            label:'不平铺'
        }],
        loading: false,
        dialogVisible:false,//图片放大展示
        dialogImageUrl:'',//图片地址
      }
    },
    mounted() {

    },
    methods: {
      handlePictureCardPreview(file) {//查看图片
        this.dialogVisible = true
        this.dialogImageUrl = file
      },
      handleRemove() {//删除
        this.form.index.Content.pic = ''
        this.form.index.Content.backgroundImage = ''
      },
      uploadImage(file) {
        let _this = this
        new Compressor(file, {
          quality: 1,
          success(file) {
            console.log(file.size)
            const formData = new FormData();
            formData.append('file', file, file.name);
            let oFileReader = new FileReader();
            oFileReader.readAsDataURL(file);
            oFileReader.onload = function (e) {
              $.ajax({
                type: 'POST',
                url: DomainName + '/FileList',
                data: {
                  Data: e.target.result,
                  DataLength: file.size,
                  FileName: file.name
                },
                complete: function (XMLHttpRequest) {
                  _this.loading = false
                  if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
                    window.parent.document.location.href = "../../../" + XMLHttpRequest.getResponseHeader("CONTENTPATH");
                  }
                },
                success: function (Result) {
                  if (Result.Status == "success") {
                    _this.form.index.Content.pic = e.target.result
                    _this.form.index.Content.backgroundImage = Result.Picture_Url
                    _this.$message.success('上传成功')
                  } else {
                    _this.$message.error('上传失败')
                  }
                },
                error: function () {
                  _this.$message.error("操作失败，请稍后再试")
                },
                dataType: "json"
              });
            }
          },
          error(err) {
            console.log(err.message);
          },
        });
      },
      submitForm(formName) {
        let _this = this
        _this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(_this.form)
            _this.loading = true
            $.ajax({
              url: DomainName + '/getAddAction?token=' + $.cookie('token'),
              type: 'POST',
              data: {
                Data: JSON.stringify({
                    enterprise_appid_style: [{
                        App_Style_SerialNumber:'',
                        App_Style_Name:_this.StyleName,
                        App_Style_JSON:JSON.stringify(_this.form)
                    }]
                }),
              },
              success: function (res) {
                if (res.Result == "成功") {
                  _this.$message({
                    message: '提交成功',
                    type: 'success'
                  });
                  window.history.go(-1);
                } else {
                  _this.$message.error(res.Result);
                }
              },
              error: function () {
                console.log(error)
              },
              complete: function (XMLHttpRequest) {
                _this.loading = false
                if (XMLHttpRequest.getResponseHeader("REDIRECT") == "REDIRECT") {
                  window.parent.document.location.href = "../../../" + XMLHttpRequest.getResponseHeader("CONTENTPATH");
                }
              }
            })
          }
          else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    }
  })